<template>
  <div>
    <el-form :model="formData" :rules="formRules" inline ref="formData" label-position="top" class="row-form">
      <el-card class="box-card">
        <div class="card-view">
          <div class="card-title">基础信息</div>

          <el-form-item label="项目名字" prop="itemName" class="form-item-css">
            <el-input v-model="formData.itemName" placeholder="请输入"/>
          </el-form-item>

          <el-form-item label="公司名称" prop="enterpriseName" class="form-item-css">
            <el-input v-model="formData.enterpriseName" placeholder="请输入"/>
          </el-form-item>

<!--          <el-form-item label="分类" prop="type" class="form-item-css">-->
<!--            <el-select v-model="formData.type" placeholder="请选择" style="width: 100%">-->
<!--              <el-option :label="item.name" :value="item.code - 0" v-for="(item, index) in typeList" :key="index"/>-->
<!--            </el-select>-->
<!--          </el-form-item>-->

          <el-form-item label="项目类型" prop="itemType" class="form-item-css">
            <el-input v-model="formData.itemType" placeholder="请输入"/>
          </el-form-item>

          <el-form-item label="成立时间" prop="foundTime" class="form-item-css">
            <el-date-picker v-model="formData.foundTime" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"
                            style="width: 100%"></el-date-picker>
          </el-form-item>

          <el-form-item label="项目标签" prop="itemTag" class="form-item-css">
            <el-input :value="formData.itemTag" placeholder="请输入 多个 , 分割<英文逗号>" @input="inputTagChange($event, 'itemTag')" :maxlength="14"/>
          </el-form-item>

          <el-form-item label="认证标签" prop="authenticationTag" class="form-item-css">
            <el-input :value="formData.authenticationTag" placeholder="请输入 多个 , 分割<英文逗号>" @input="inputTagChange($event, 'authenticationTag')" :maxlength="14"/>
          </el-form-item>

          <el-form-item label="咨询电话" prop="consultPhone" class="form-item-css" :maxlength="11">
            <el-input type="number" v-model="formData.consultPhone" placeholder="请输入"/>
          </el-form-item>

          <el-form-item label="投资额" prop="investSum" class="form-item-css">
            <el-input v-model="formData.investSum" placeholder="请输入"/>
          </el-form-item>

          <el-form-item label="主要产品" prop="mainProduct" class="form-item-css">
            <el-input v-model="formData.mainProduct" placeholder="请输入"/>
          </el-form-item>

          <el-form-item label="经营方式" prop="manageWay" class="form-item-css">
            <el-input v-model="formData.manageWay" placeholder="请输入"/>
          </el-form-item>

          <el-form-item label="门店数量" prop="shopCount" class="form-item-css">
            <el-input type="number" v-model="formData.shopCount" placeholder="请输入"/>
          </el-form-item>

          <el-form-item label="加盟区域" prop="joinArea" class="form-item-css">
            <el-select v-model="formData.joinArea" placeholder="请选择" style="width: 100%" multiple>
              <el-option :label="item.regionName" :value="item.regionName" v-for="(item, index) in regionlist"
                         :key="index"/>
            </el-select>

          </el-form-item>

          <el-form-item label="加盟费" prop="joinSum" class="form-item-css">
            <el-input type="number" v-model="formData.joinSum" placeholder="请输入"/>
          </el-form-item>

          <el-form-item label="加盟商数量" prop="joinCount" class="form-item-css">
            <el-input type="number" v-model="formData.joinCount" placeholder="请输入"/>
          </el-form-item>

          <el-form-item label="加盟费区间最低" prop="itemJoinNanoMin" class="form-item-css">
            <el-input type="number" v-model="formData.itemJoinNanoMin" placeholder="请输入"/>
          </el-form-item>

          <el-form-item label="加盟费区间最高" prop="itemJoinNanoMax" class="form-item-css">
            <el-input type="number" v-model="formData.itemJoinNanoMax" placeholder="请输入"/>
          </el-form-item>
          <div class="form-item-css"></div>
          <el-form-item label="封面图" prop="itemCover" class="form-item-css">
            <div class="image-view" v-if="formData.itemCover">
              <el-image :src="formData.itemCover" fit="cover" style="width: 100%; height: 100%"></el-image>
              <i class="el-icon-circle-close" @click="formData.itemCover = null"></i>
            </div>
            <UploadFile v-model="formData.itemCover" v-else style="width: 100%"/>
          </el-form-item>

          <el-form-item label="品牌详情图" prop="brandInfoImg" style="width: 100%;">
            <div class="row-start">
              <div class="image-list" v-for="(item, index) in formData.brandInfoImg">
                <el-image :src="item" fit="cover" class="image-item"></el-image>
                <div class="row-div image-hover">
                  <i class="el-icon-delete" @click="imageListDelete(index)"></i>
                </div>
              </div>
              <UploadFile multiple :file-list="formData.brandInfoImg" listType @change="fileListChange"
                          v-if="formData.brandInfoImg.length<5"/>
            </div>
          </el-form-item>
        </div>
      </el-card>

      <el-card class="box-card">
        <div class="card-view">
          <div class="card-title">发展历程</div>
          <el-form-item label="" prop="developCourse" style="width: 100%">
            <Tinymce v-model="formData.developCourse"></Tinymce>
          </el-form-item>
        </div>
      </el-card>

      <el-card class="box-card">
        <div class="card-view">
          <div class="card-title">专利荣誉</div>
          <el-form-item label="" prop="patentHonor" style="width: 100%">
            <Tinymce v-model="formData.patentHonor"></Tinymce>
          </el-form-item>
        </div>
      </el-card>
      <div class="row-div" style="margin: 30px 0">
        <el-button style="width: 300px" @click="$router.push('/enterpriseManage/enterpriseServe')">取 消
        </el-button>
        <el-button type="primary" style="width: 300px" @click="onSubmit">提 交</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>

export default {
  name: "enterpriseServeAdd",
  components: {
    Tinymce: () => import('@/components/Tinymce')
  },
  data() {
    return {
      detailId: null,
      typeList: [],
      regionlist: [],
      formData: {
        itemName: null, // 项目名字
        enterpriseName: null, // 公司名称
        type: 0, // 类型资源表code
        foundTime: null, // 成立时间
        itemTag: null, // 项目标签
        itemType: null, // 项目类型
        authenticationTag: null, // 认证标签
        consultPhone: null, // 我要咨询电话
        investSum: null, // 投资额
        mainProduct: null, // 主要产品
        manageWay: null, // 经营方式
        shopCount: null, // 门店数量
        joinArea: null, // 加盟区域
        joinSum: null, // 加盟费
        joinCount: null, // 加盟商数量

        itemJoinNanoMin: null, // 项目加盟费区间最低
        itemJoinNanoMax: null, // 项目加盟费区间最高
        itemCover: null, // 项目封面
        brandInfoImg: [], // 品牌详情图最多5张
        developCourse: null, // 发展历程
        patentHonor: null, // 专利荣誉
      },
      formRules: {
        itemName: [
          {required: true, message: '请输入项目名字', trigger: 'blur'}
        ],
        enterpriseName: [
          {required: true, message: '请输入公司名称', trigger: 'blur'}
        ],
        type: [
          {required: true, message: '请选择分类', trigger: 'change'}
        ],
        foundTime: [
          {required: true, message: '请选择成立时间', trigger: 'change'}
        ],
        itemTag: [
          {required: true, message: '请输入项目标签', trigger: 'blur'}
        ],
        itemType: [
          {required: true, message: '请输入项目类型', trigger: 'blur'}
        ],
        authenticationTag: [
          {required: true, message: '请输入认证标签', trigger: 'blur'}
        ],
        consultPhone: [
          {required: true, message: '请输入咨询电话', trigger: 'blur'}
        ],
        investSum: [
          {required: true, message: '请输入投资额', trigger: 'blur'}
        ],
        mainProduct: [
          {required: true, message: '请输入主要产品', trigger: 'blur'}
        ],
        manageWay: [
          {required: true, message: '请输入经营方式', trigger: 'blur'}
        ],
        shopCount: [
          {required: true, message: '请输入门店数量', trigger: 'blur'}
        ],
        joinArea: [
          {required: true, message: '请选择加盟区域', trigger: 'change'}
        ],
        joinSum: [
          {required: true, message: '请输入加盟费', trigger: 'blur'}
        ],
        joinCount: [
          {required: true, message: '请输入加盟商数量', trigger: 'blur'}
        ],
        itemJoinNanoMin: [
          {required: true, message: '请输入项目加盟费区间最低', trigger: 'blur'}
        ],
        itemJoinNanoMax: [
          {required: true, message: '请输入项目加盟费区间最高', trigger: 'blur'}
        ],
        itemCover: [
          {required: true, message: '请上传项目封面', trigger: 'change'}
        ],
        brandInfoImg: [
          {required: true, message: '请上传品牌详情图', trigger: 'change'}
        ],
        developCourse: [
          {required: true, message: '请输入发展历程', trigger: 'blur'}
        ],
        patentHonor: [
          {required: true, message: '请输入专利荣誉', trigger: 'blur'}
        ]
      }
    }
  },
  beforeMount() {
    if (this.$route.query.detailId) {
      this.detailId = this.$route.query.detailId
      this.getDetailRequest()
    }
    this.getRegionlist()
    this.getTypeList()
  },
  methods: {
    inputTagChange (value, key) {
      if (value && value.split(',').length > 3) return
      this.formData[key] = value
    },
    onSubmit() {
      console.log(this.formData)
      this.$refs.formData.validate(async (valid) => {
        if (!valid) return this.$message.warning('请完善信息')
        const formData = JSON.parse(JSON.stringify(this.formData))
        formData.brandInfoImg = formData.brandInfoImg ? formData.brandInfoImg.join(',') : ''
        formData.joinArea = formData.joinArea ? formData.joinArea.join(',') : ''
        console.log("formData", formData)
        const url = this.detailId ? '/wx/enterprise/serve/update' : '/wx/enterprise/serve/add'
        await this.$ajax.post(url, formData)
        this.$message.success('操作成功!')
        this.$router.push('/enterpriseManage/enterpriseServe')
      })
    },
    async getDetailRequest() {
      const res = await this.$ajax.get(`/wx/enterprise/serve/info?id=${this.detailId}`);
      const entity = res.data
      entity.joinArea = entity.joinArea ? entity.joinArea?.split(',') : [];
      entity.brandInfoImg = entity.brandInfoImg ? entity.brandInfoImg?.split(',') : [];
      console.log("getDetailRequest", entity)
      entity.type = entity.type - 0
      this.formData = entity
    },
    async getRegionlist() {
      const res = await this.$ajax.get('/region/list')
      res.rows.unshift({regionName: '全国'})
      this.regionlist = res.rows;
    },
    /**
     * 图片列表删除事件
     */
    imageListDelete(index) {
      this.formData.brandInfoImg.splice(index, 1)
    },
    /**
     * 内容图片变化事件
     */
    fileListChange(event) {
      this.formData.brandInfoImg = event
    },
    /**
     * 获取类型
     */
    async getTypeList() {
      const res = await this.$ajax.get('/resource/table/list?type=qiyefuwu')
      this.typeList = res.rows
    },
  }
}
</script>

<style scoped lang="scss">
.box-card + .box-card {
  margin-top: 20px;
}

.image-list {
  width: 148px;
  height: 148px;
  position: relative;
  margin-right: 10px;
  border: 1px dashed #c0ccda;
  border-radius: 6px;

  &:hover > .image-hover {
    display: flex;
    z-index: 1;
  }

  .image-item, .image-hover {
    width: 100%;
    height: 100%;
    border-radius: 6px;
  }

  .image-hover {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 20px;
  }
}

.card-view {
  width: 100%;

  .card-title {
    width: 200px;
    font-weight: bold;
    font-size: 18px;
    padding-bottom: 10px;
    margin-bottom: 20px;
    position: relative;

    &:before {
      content: "";
      width: 200px;
      height: 1px;
      background: #000000;
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }

  .form-item-css {
    width: calc(100% / 3 - 10px);
    position: relative;

    .delete-but {
      position: absolute;
      color: red;
      z-index: 2;
      right: 0;
      top: -40px;
    }
  }
}

.image-view {
  width: 100%;
  height: 178px;
  position: relative;

  .el-icon-circle-close {
    font-size: 30px;
    color: red;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 100;
  }

  .el-icon-circle-close:hover {
    cursor: pointer;
  }
}
</style>
